import { QuestionCircleOutlined } from "@ant-design/icons"
import { Table, TableColumnsType, Tooltip } from "antd"
import React from "react"
import { useSelector } from "react-redux"

import { SFlex } from "@/components/common"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"
import { handleTotalNumber } from "@/utils/util"

interface Props {
	loading: boolean
	proxyAccountInfo: any
}

const Table3: React.FC<Props> = ({ loading, proxyAccountInfo }) => {
	const { newFormat } = useLocale()
	const { currency } = useSelector((state: AppState) => state.config)

	const columns: TableColumnsType = [
		{
			title: newFormat("funds.columns.project"),
			dataIndex: "venueName",
			align: "center",
			width: 50,
			render: text => <span>{text}</span>
		},
		{
			title: newFormat("funds.columns.member_valid_bet"),
			dataIndex: "clubAmount",
			align: "center",
			render: text => <span>{handleTotalNumber(currency.symbol, "USDT", text)}</span>
		},
		{
			title: newFormat("funds.columns.team_rebate_rate"),
			dataIndex: "rebateRate",
			align: "center",
			render: (text, record) => <span>{record.venueName === "合计" ? "-" : `${text}%`}</span>
		},
		{
			title: newFormat("funds.columns.team_rebate_amount"),
			dataIndex: "rebateAmount",
			align: "center",
			render: text => <span>{handleTotalNumber(currency.symbol, "USDT", text)}</span>
		},
		{
			title: newFormat("funds.columns.team_occupancy_ratio"),
			dataIndex: "zhanchengRate",
			align: "center",
			render: (text, record) => <span>{record.venueName === "合计" ? "-" : `${text}%`}</span>
		},
		{
			title: (
				<span>
					{newFormat("funds.columns.rebate_cost_sharing")}
					<Tooltip title={newFormat("funds.columns.rebate_cost_sharing_formula")} placement="top">
						<QuestionCircleOutlined />
					</Tooltip>
				</span>
			),
			dataIndex: "partRebateAmount",
			align: "center",
			render: text => <span>{handleTotalNumber(currency.symbol, "USDT", text)}</span>
		},
		{
			title: newFormat("funds.columns.direct_agent_team_rebate_amount"),
			dataIndex: "underProxyAmount",
			align: "center",
			render: text => <span>{handleTotalNumber(currency.symbol, "USDT", text)}</span>
		},
		{
			title: newFormat("funds.columns.member_proxy_rebate"),
			dataIndex: "memberRebateAmountByProxy",
			align: "center",
			render: text => <span>{handleTotalNumber(currency.symbol, "USDT", text)}</span>
		},
		{
			title: (
				<span>
					{newFormat("funds.columns.actual_rebate_amount")}
					<Tooltip title={newFormat("funds.columns.actual_rebate_amount_formula")} placement="top">
						<QuestionCircleOutlined />
					</Tooltip>
				</span>
			),
			dataIndex: "incomeAmount",
			align: "center",
			render: text => <span>{handleTotalNumber(currency.symbol, "USDT", text)}</span>
		}
	]

	return (
		<SFlex vertical>
			<Table
				size="small"
				className="small-size-table"
				dataSource={proxyAccountInfo}
				columns={columns}
				pagination={false}
				rowKey="userName"
				style={{ width: "100%", margin: "15px 0" }}
				loading={loading}
			/>
		</SFlex>
	)
}

export default Table3
